<template>
    <div id="main">
        <router-view></router-view>
        <mt-tab-container v-model="selected">
            <!-- 首页 -->
            <mt-tab-container-item id="首页">
               <router-view :name="$store.state.homePage"></router-view>
            </mt-tab-container-item>
            <!-- 购物车 -->
            <mt-tab-container-item id="购物车">
                 <router-view name="car"></router-view>
            </mt-tab-container-item>
            <!-- 我的 -->
            <mt-tab-container-item id="我的">
                <!-- 每次 当点击需要登陆的内容时，提醒他登陆 定义一个方法即可 -->
                <router-view v-if="!$store.state.username"  :name="$store.state.count"></router-view>
                <router-view v-else  name="set"></router-view>
            </mt-tab-container-item>
        </mt-tab-container>
        <mt-tabbar v-if="tabBarShow" v-model="selected">
            <mt-tab-item id="首页">
                <img slot="icon" v-if="homeFlag" src="../lib/img/tabs/home.png">
                <img slot="icon" v-else src="../lib/img/tabs/home-active.png">
                首页
            </mt-tab-item>
            <mt-tab-item id="购物车">
                <img slot="icon" v-if="carFlag" src="../lib/img/tabs/message.png">
                <img slot="icon" v-else src="../lib/img/tabs/message-active.png">
                购物车
            </mt-tab-item>
            <mt-tab-item id="我的">
                <img slot="icon" v-if="setFlag" src="../lib/img/tabs/profile.png">
                <img slot="icon" v-else src="../lib/img/tabs/profile-active.png">
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>
<script>

import axios from 'axios'
import { Toast} from 'mint-ui'
import { mapState } from 'vuex';

export default {
    data(){
        return {
          selected: '首页',
          homeFlag: false,
          carFlag: true,
          setFlag: true
        }
    },
    computed:{
        ...mapState([
            'tabBarShow'
        ])
    },
    mounted() {
        window.addEventListener('unload', this.saveState)
    },
    methods: {
        saveState() {
            // sessionStorage.setItem('state', JSON.stringify(this.$store.state))
        }
    },
    watch: {
        selected(val, oldVal){
            switch(val){
                case '首页':
                    this.homeFlag = !this.homeFlag
                    break
                case '购物车':
                    this.carFlag = !this.carFlag
                    break
                case '我的':
                    this.setFlag = !this.setFlag
                    break
            }

             switch(oldVal){
                case '首页':
                    this.homeFlag = !this.homeFlag
                    break
                case '购物车':
                    this.carFlag = !this.carFlag
                    break
                case '我的':
                    this.setFlag = !this.setFlag
                    break
            }
        }
    }
}
</script>
<style lang="less" scoped>
    #main{
        .mint-tab-container{
            padding-bottom: 60px;
        }
        .mint-tabbar{
            position: fixed;
            buttom: 0;
            left: 0;
            width: 100%;
            height: 55px;
        }
    }
</style>

